<script setup>
import LoginInput from '../components/Login/loginInput.vue'
import {ref,reactive,toRef,toRefs,onBeforeMount} from 'vue'
import { GetImgCodeapi, GetInfoCodeapi,GetLoginapi } from '../http/api';
import {useRouter} from 'vue-router'
const {push,go}=useRouter()
const flag=ref(false)
const ImgUrl=ref('')
const userInfo=reactive({
    // 图片验证码
    captcha:'',
    // 设备id
    device_id:'1',
    // 设备列表
    device_type:'2',
    // 手机号
    mobile:'',
    // 短信验证码
    sms_code:'',
    // 用户初始密码
    user_pass:'000000',
    // 图片验证码key
    key:''
})
const obj=reactive({
    dis:false,
    show:true,
    timer:null,
    count:""
})
const ReLoginways=(e)=>{
    console.log(e);
        // flag.value=true
        if (e===1) {
            flag.value=true
        }else{
            flag.value=false
        }
}
 onBeforeMount(() =>{
   getCode()
})
const getCode=()=>{
    GetImgCodeapi().then((res)=>{
        console.log('res',res);
        ImgUrl.value=res.data.data.url.img
        userInfo.key=res.data.data.url.key
    })
}
const GetInfoCode=()=>{
    console.log(userInfo);
    GetInfoCodeapi({mobile:userInfo.mobile,sms_type:"login"}).then((res)=>{
        console.log('短信验证码',res);
    })
    let mins=60
    if (!obj.timer) {
        obj.count=mins
        obj.show=false
        obj.dis=true
        obj.timer=setInterval(()=>{
            if (obj.count>0&&obj.count<=mins) {
                obj.count--
            }else{
                obj.dis=false
                obj.show=true
                clearInterval(obj.timer)
                obj.timer=null
            }
        },1000)
    }
}
// 手机号
const mobilechange=(e)=>{
        // console.log(e);
        userInfo.mobile=e
}
// 手机验证码
const SmsChange=(e)=>{
    userInfo.sms_code=e
    localStorage.setItem('sms_code',e)
}
// 图片验证码
const ImgCodeChange=(e)=>{
       userInfo.captcha=e 
}
const SubLogin=()=>{
    console.log(userInfo);
      GetLoginapi(userInfo).then((res)=>{
            console.log('登录后台返回',res);
            localStorage.setItem('token',res.data.data.remember_token)
            localStorage.setItem('user_name',res.data.data.user_name)
            localStorage.setItem('user_nick',res.data.data.user_nickname)
            localStorage.setItem('real_name',res.data.data.real_name)
            localStorage.setItem('status_login',res.data.data.status)
            if (res.data.data.is_new_user) {
                push('/setpass')
            }else{
                push('/mine')
            }
      })
}
const PassChange=(e)=>{
        userInfo.user_pass=e
}
const Back=()=>{
    // push('/')
    go(-1)
}
</script>
<template>
    <div>
        <div class="head_back">
            <van-icon name="arrow-left" size="30" @click="Back"/>
        </div>
        <div class="_login_main">
            <div class="_login_logo">
                <img src="https://wap.lexuemiao.com/img/logo@2x.a4702f31.png" alt="">
            </div>
            <div class="_login_input">
                <login-input :placeholder="'请输入手机号'" @INputChange="mobilechange" >
                    <template v-slot:icon>
                        <van-icon name="phone-o" size="30" color="orange" />
                    </template>
                    <template  v-slot:img>
                        <button class="_input_btn" v-show="flag" @click="GetInfoCode" :disabled="obj.dis">{{!obj.dis?'获取验证码':'重新发送'+obj.count}}</button>
                    </template>
                </login-input>
                 <login-input :placeholder="'请输入密码'" @INputChange="PassChange" v-show="!flag" >
                    <template v-slot:icon>
                        <van-icon name="shield-o" size="30" color="orange" />
                        <!-- <van-icon name="phone-o" color="orange" /> -->
                    </template>
                    <template v-slot:img>
                        
                    </template>
                </login-input>
                 <login-input :placeholder="'请输入验证码'" @INputChange="SmsChange" :title="userInfo.sms_code" v-show="flag">
                    <template v-slot:icon>
                    <van-icon name="shield-o" size="30" color="orange" />
                    </template>
                    <template v-slot:img>
                        
                    </template>
                </login-input>
                  <login-input :placeholder="'请输入验证码'" @INputChange="ImgCodeChange" :title="userInfo.captcha">
                    <template v-slot:icon>
                    <van-icon name="shield-o" size="30" color="orange" />
                    </template>
                    <template v-slot:img>
                        <img :src="ImgUrl" alt="" @click="getCode" class="_inout_code">
                    </template>
                </login-input>
            </div>
            <button @click="SubLogin">登录</button>
            <div class="_login_detail_info" v-show="!flag">
                <div >忘记密码?</div>
                <div @click="ReLoginways(1)">注册/验证码登录</div>
            </div>
            <div class="_login_detail_info" v-show="flag">
                <div >未注册的手机号码将自动注册</div>
                <div @click="ReLoginways(0)">密码登录</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.head_back{
    width: 100%;
    height: 80px;
    background-color: aliceblue;
}
._login_main{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
._login_logo{
    width: 100%;
    height: 250px;
    /* background-color: antiquewhite; */
    position: relative;
}
._login_logo img{
    width: 50%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* margin: auto; */
}
button{
    width: 70%;
    height: 80px;
    background-color: #f15a24;
    text-align: center;
    color: white;
    border: none;
    margin-top: 20px;
}
._login_detail_info{
    width: 70%;
    height: 80px;
    font-size: 26px;
    color: grey;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
._input_btn{
    width: 160px;
    font-size: 26px;
    height: 50px;
    background-color: #f15a24;
    line-height: 50px;
    color: white;
    border: none;
    /* margin-bottom: 10px; */
}
._inout_code{
    width: 100%;
    height: 70px;
}
</style>